<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程  和 面向对象

    // 面向过程   =>  分析解决问题需要的步骤,然后通过变量和函数将一一实现,使用时依次调用即可

    // 经典案例:
    // 购物车:    1. 获取元素 2. 全选反选  3.加减  4.单删全删  5.结算
    // 元素拖拽:  1. 获取元素 2.先按下->记录按下的位置  3. 移动时 盒子跟随鼠标移动  3. 松开时 -> 盒子不在跟随鼠标移动


    // 面向对象:
    // 思想上提升 =>  就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)
    // 也就是说,把构造成问题的事物(要做的或所做的时),分解成各个对象,建立对象的目的是为了描述在解决问题中的步骤和行为

    // 个体户   => 遇到啥问题就解决啥问题
    // 企业经营 => 前台 产品 UI 前端 后端 测试 财务 经理  =>大量的分工和紧密的协作

    // 经典案例: 把大象放到冰箱中需要几步?

    // 面向过程:  分析解决问题需要的步骤,然后通过变量和函数将一一实现,使用时依次调用即可

    /* var elephant = "大象";
    var iceBox = "冰箱";

    function open() {

    }

    function put(target) {

    }

    function close() {

    } */


    // 面向对象版  => 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)  把构造成问题的事物(要做的或所做的时),分解成各个对象,建立对象的目的是为了描述在解决问题中的步骤和行为

    var elephant = {
        name: "嘟嘟",
        age: 2,
        weight: "400kg",
    }

    var iceBox = {
        name: "美的",
        space: "120L",
        power: 3,
        open: function () {
            // 打开冰箱 -> 开灯
        },
        put: function (target) {
            // 保鲜层  

            // 冷冻层
        },
        close: function () {
            // 关上冰箱 -> 关灯
        }
    }


    iceBox.open();
    iceBox.put(elephant);
    iceBox.close();


    // 小结:
    // 可以理解为把面向过程中的变量 和 函数 整合到对象中 => 作为对象的属性和方法  (最简单的面向对象  -> 字面量对象)


    // 面向对象的三大特征: 封装  继承  多态









</script>

</html>